<template>
  <div class="navagation">
    <el-row>
      <el-col :span="3">
        <div class="logo-container">
          <a href="/" class="logo-link">
            <i class="iconfont icon-r-home logo-icon"></i> 
            <span class="logo-text">星界贸易</span>
          </a>
        </div>
      </el-col>
      <el-col :span="14">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo modern-menu"
          mode="horizontal"
          router
          background-color="transparent"
          text-color="#ffffff"
          active-text-color="rgba(255, 255, 255, 0.2)"
        >
          <el-menu-item index="/" class="menu-item">商城首页</el-menu-item>
          
          <el-menu-item index="/goodList" class="menu-item"
            >商品分类</el-menu-item
          >
          <el-menu-item index="/cart" class="menu-item"
            >我的购物车</el-menu-item
          >
          <el-menu-item index="/orderlist" class="menu-item"
            >我的订单</el-menu-item
          >
          <el-menu-item index="/exchange/shop" class="menu-item"
            >积分兑换</el-menu-item
          >
          <el-menu-item
            index="/manage"
            class="menu-item"
            v-if="role === 'admin'"
            >后台管理</el-menu-item
          >
        </el-menu>
      </el-col>
      <el-col :span="3">
        <!-- 通知铃铛 -->
        <div class="notification-wrapper" v-if="loginStatus">
          <notification-bell />
        </div>
      </el-col>
      <el-col :span="4">
        <!--         右上角个人信息-->
        <el-dropdown class="user-dropdown">
          <span class="el-dropdown-link user-link">
            <div class="user-info">
              <img
                v-if="user.avatarUrl != null"
                :src="baseApi + user.avatarUrl"
                class="avatar"
              />
              <span class="user-nickname">{{ user.nickname }}</span>
              <i class="el-icon-arrow-down el-icon--right dropdown-icon"></i>
            </div>
          </span>
          <!--          下拉菜单-->
          <el-dropdown-menu slot="dropdown" style="text-align: center">
            <el-dropdown-item>
              <!--              传给前端，登录后跳转页面的path为 "/"-->
              <div
                @click="$router.push({ path: '/login', query: { to: '/' } })"
                v-show="!loginStatus"
              >
                登录
              </div>
            </el-dropdown-item>
            <el-dropdown-item v-show="loginStatus">
              <div @click="$router.push('/person')">个人信息</div>
            </el-dropdown-item>
            <el-dropdown-item v-show="loginStatus">
              <div @click="$router.push('/exchange/record')">兑换记录</div>
            </el-dropdown-item>
            <el-dropdown-item v-show="loginStatus">
              <div @click="logout">退出</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import NotificationBell from './NotificationBell.vue';

export default {
  name: "Navagation",
  components: {
    NotificationBell
  },
  props: {
    user: Object,
    loginStatus: Boolean,
    role: String,
  },
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      baseApi: this.$store.state.baseApi,
    };
  },
  methods: {
    logout() {
      localStorage.removeItem("user");
      this.$router.go(0);
      this.$message.success("退出成功");
    },
  },
};
</script>
<style>
a {
  text-decoration: none;
}
.navagation {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: transparent;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.logo-container {
  text-align: center;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-link {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.logo-link:hover {
  color: #f0f0f0;
  transform: scale(1.05);
}

.logo-icon {
  font-size: 24px;
  margin-right: 8px;
}

.logo-text {
  font-weight: 600;
}

.modern-menu {
  border: none;
  background: transparent !important;
}

.modern-menu .el-menu-item {
  color: #ffffff !important;
  border-bottom: none;
  transition: all 0.3s ease;
  position: relative;
}

.modern-menu .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.modern-menu .el-menu-item.is-active {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.modern-menu .el-menu-item.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
}

.menu-item {
  padding-left: 50px;
  padding-right: 50px;
}

.notification-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

.user-dropdown {
  cursor: pointer;
  float: right;
  margin-right: 60px;
}

.user-link {
  color: #ffffff;
}

.user-info {
  display: flex;
  align-items: center;
  color: #ffffff;
}

.user-nickname {
  margin: 0 8px;
  font-weight: 500;
}

.dropdown-icon {
  margin-right: 5px;
  color: #ffffff;
}

.avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.avatar:hover {
  border-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}
</style>